<template>
  <div>
    <div v-show='!dialogTableVisible1&&!dialogTableVisible'>
      <el-form label-width="90px" size="small" class="base-search-more">
        <el-row >
          <el-col :span='6'>
            <el-form-item label="通知">
              <el-select style="width:100%" v-model="params.type" clearable>
                <el-option label='群发' value='0'></el-option>
                <el-option label='单发' value='1'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label="主题">
              <el-input style='width: 100%' v-model='params.title'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label='日期'>
               <pt-date-picker v-model="params.date" :shortcuts="[{ text: '今天', start: 0, end: 0}, { text: '昨天', start: -1, end: 0},
                { text: '近七天', start: -7, end: 0}, {text: '近一个月', start: -30, end: 0}]" />
            </el-form-item>
          </el-col>
          <el-col :span='12' style="text-align: right;">
            <el-form-item label-width="0">
              <el-button type="primary" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row type="flex" justify="end" style="padding: 10px 15px;background: #fff;">
        <el-button type="primary" plain icon="el-icon-plus" @click="addInform(1)">新建通知</el-button>
      </el-row>
      <div class="base-table-wrap">
        <el-table :data="tableData.list" stripe style="width: 100%">
          <el-table-column type="index" label="#" width="40" align="center"></el-table-column>
          <el-table-column prop="createtime" label="消息日期" width="180" align="center"></el-table-column>
          <el-table-column prop="title" label="主题" min-width="360" align="left"></el-table-column>
          <el-table-column prop="agentname" label="接收对象" min-width="130" align="center">
            <template slot-scope="scope">
              <div v-if='scope.row.agentname'> {{scope.row.agentname}}</div>
              <div style='color: red' v-else>全部区域</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button class="el-text-check" type="text" size="mini" @click='addInform(2,scope.row)'>查看</el-button>
              <el-button class="el-text-danger" type="text" size="mini" @click='deleteInform(scope.row.id)'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pt-table-loading v-show="isloadingTable"></pt-table-loading>
        <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent"></pt-pagination>
      </div>
    </div>
    <div v-show='dialogTableVisible1' class='info-inform-addShop'>
      <div style='margin: 15px;background: #fff;'>
        <el-row class="back-head" type="flex" align="middle">
          <span @click="dialogTableVisible1 = false" style="cursor: pointer"><i class="el-icon-arrow-left"></i>返回</span>
          <span style='color:#8c8b8b'>通知日期：{{check.createtime}}</span>
        </el-row>
        <div style='padding: 15px;max-width: 1000px;margin: 0 auto'>
          <p style='line-height: 32px;margin:0 auto; font-weight: bold;font-size: 18px;text-align: center'>
            {{check.title}}</p>
          <p style='font-size: 16px;font-weight: bold;line-height: 100px'>尊敬的{{check.agentname||'全部区域'}}:</p>
          <div class='quill-editor '>
            <div class="ql-container ql-snow">
              <div style='margin-top: 40px' class='ql-editor ql-blank' v-html='check.content'></div>
            </div>
          </div>
        </div>
        <p style='text-align: center;line-height: 65px'>
          <el-button type="primary" @click="dialogTableVisible1 = false">确认</el-button>
        </p>
      </div>
    </div>
    <div v-show="dialogTableVisible" class='info-inform-addShop'>
      <div style='margin: 15px;background: #fff;'>
        <el-row class="back-head" type="flex" align="middle">
          <span @click="dialogTableVisible = false" style="cursor: pointer"><i class="el-icon-arrow-left"></i>返回</span>
          <span style="color:rgb(246, 82, 47)">新建通知</span>
        </el-row>
        <el-form style='padding: 15px' :model="form" ref="ruleForm" label-width="80px" class="demo-ruleForm"
                 size="small">
          <el-form-item label="通知对象" :rules="[{required: true, message: '请选择通知对象', trigger: 'change'}]">
            <el-select v-model="form.agentid" filterable default-first-option placeholder="--区域--">
              <el-option  label="全部区域" value=""></el-option>
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主题" prop="title">
            <el-input v-model="form.title" :rules="[{required: true, message: '请输入通知主题', trigger: 'blur'}]">
            </el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content" :rules="[{required: true, message: '请输入内容', trigger: 'blur'}]">
            <quill-editor v-model="form.content" ref="myQuillEditor" :options="editorOption">
            </quill-editor>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading='issubmitLoading' @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="dialogTableVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import { quillEditor } from 'vue-quill-editor'   //只支持ie以上
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { getDay } from '@/utils/ptkc.js'
  export default {
    components: { quillEditor },
    data() {
      return {
        params: {  //查询数据
          page: 0,
          size: 10,
          date: '',
          title: '',
          type: '',
        },
        form: {
          agentid: '',
          title: '',
          content: '',
        },
        check: {
          title: '',
          content: '',
          agentname: '',
          createtime: '',
        },
        editId: null, //被编辑的通知
        isloadingTable: false,
        issubmitLoading: false,//保存或修改

        dialogTableVisible: false,
        dialogTableVisible1: false,
        tableData: {},
        editorOption: {},
      }
    },
    computed: {
      restaurants() { // 区域数据
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val, oldVal) {
          if (val && val.length) {
            this.params.agentid = val[0].id
            this.getTableList()
          }
        },
        deep: true
      }
    },
    methods: {
      addInform(type, row) {
        if (type == '1') {
          this.dialogTableVisible = true
          this.$nextTick(() => {
            this.form = Object({}, this.$options.data.form)
            this.editId = null
          })
        } else if (type == '2') {
          this.check.title = row.title
          this.check.content = row.content
          this.check.agentname = row.agentname
          this.check.createtime = row.createtime
          this.dialogTableVisible1 = true
        }
      },
      deleteInform(id) { // 删除通知
        this.isloadingTable = true
        const params = {id}
        this.$http.get('/server/notice/delete?' + this.qs.stringify(params)).then(res => {
          this.isloadingTable = false
          if (res.data.success) {
            if (this.tableData.list.length === 1) {
              this.$refs.pagination.handleSizeChange(10)
            } else {
              this.getTableList()
            }
          } 
        }).finally(() => { this.isloadingTable = false })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.form }
            this.issubmitLoading = true
            this.$http.post('/server/notice/save', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.dialogTableVisible = false
                this.getTableList()
              }
            })
            .finally(() => { this.issubmitLoading = false })
          }
        })
      },
      getTableList() {
        this.isloadingTable = true
        const params = { ...this.params }
        params.date = params.date ? params.date.join(',') : ''
        this.$http.get('/server/notice/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) this.tableData = res.data.data
        }).finally(() => { this.isloadingTable = false })
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      }
    },
    mounted() {
      if (this.restaurants && this.restaurants.length) {
        this.getTableList()
      }
    }
  }
</script>

<style scoped>
  .ql-editor {
    min-height: 400px !important;
  }

  .ql-snow .ql-tooltip {
    left: 0 !important;
  }

  .info-inform-addShop {
    position: fixed;
    top: 47px;
    left: 200px;
    right: 0px;
    bottom: 0;
    overflow: scroll;
    z-index: 999;
    background: #f2f2f2;
  }

  .back-head {
    height: 50px;
    padding: 0 15px;
    border-bottom: 1px solid #e2e2e2;
  }

  .back-head span {
    margin-left: 20px;
    font-size: 16px;
    font-weight: bold;
  }
</style>
